import React, { useEffect, useState,useRef } from 'react'
import { Button, message, Table } from 'antd'
import type { ColumnsType } from 'antd/es/table';
import type { TableRowSelection } from 'antd/es/table/interface';
import ComSearch from '../../components/ComSearch'
import { SettingOutlined } from '@ant-design/icons';
// import { getAllServiceType,addServiceType } from '../../apis/servicetype';
import CategoryDrawer from '../../components/Category/CategoryDrawer';
import { useDispatch, useSelector } from 'react-redux';
import { getAllService } from '../../redux/category/categoryAction';
import { delServiceType } from '../../apis/servicetype';

type Props = {}

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
  description: any
}






const Category = (props: Props) => {
  const name = '名称'
  const [data,setData] = useState([])
  const childRef = useRef<any>();
  const state = useSelector((state:any) => state.cateData)
  const dispatch = useDispatch()
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [IsUpdate,setIsUpdate]=useState(false)
  const [updateData,setUpdateData] = useState({})

  useEffect(()=>{
    // getServiceTypeDate()
    // console.log('state',state);
    dispatch<any>(getAllService())
  },[])

  //获取所有服务类型
  // const getServiceTypeDate=async () =>{
  //   const res = await getAllServiceType()
  //   console.log('res',res);
  //   if(res.status===200){
  //     setData(res.data.rows.children)
  //   }
    
  // }
  const columns: ColumnsType<DataType> = [
    {
      title: '名称',
      dataIndex: 'title',
    },
  
    {
      title: '操作',
      dataIndex: 'action',
      render:(text,val)=>(
        <SettingOutlined onClick={()=> updateBtn(val) } style={{color:'rgb(22,119,255)'}}/>
      )
    },
  ];

  //修改
  const updateBtn = (val:any) =>{
    console.log(val);
    setUpdateData({
      id:val.id,
      parentId:val.parentId,
      title:val.title
    })
    setIsUpdate(true)
    childRef.current.showDrawer()
  }

  //搜索
  const seaBtn = (val: string) => {
    console.log("ser", val);
    dispatch<any>(getAllService(val))
  }

  //重置
  const resetBtn = (val: string) => {
    dispatch<any>(getAllService())
  }

  //新增
  const addBtn = () =>{
    setIsUpdate(false)
    childRef.current.showDrawer()
  }

  //删除
  const delBtn =async () =>{
    const res = await delServiceType(selectedRowKeys)
    console.log(res);
    if(res.status===200){
      message.success("删除成功！")
      dispatch<any>(getAllService())
    }else{
      message.error("删除失败！")
    }
  }



  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
  };



  return (
    <div>
      {/* 抽屉 */}
      <CategoryDrawer ref={childRef} IsUpdate={IsUpdate} updateData={updateData}></CategoryDrawer>
      {/* 搜索 */}
      <ComSearch name={name} search={seaBtn} resetting={resetBtn}></ComSearch>
      <div style={{ display: 'flex',marginBottom:'10px'}}>
        <Button style={{ marginRight: '10px', border: '1px solid rgb(50,161,255)', color: 'rgb(50,161,255)' }} onClick={addBtn}>新增</Button>
        <Button onClick={delBtn}>删除</Button>
      </div>
      {/* 表单 */}
      <div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={state}/>;
      </div>
    </div>
  )
}

export default Category